<template>
  <div class="main-page-container">
    <div class="tool-bar">
    </div>
    {{ displayControlStore.displayTheme }}
    <button @click="changeTheme">change theme</button>
  </div>
</template>

<script setup lang="ts">

import { useDisplayControlStore } from '@/stores/displayControlStore'
const displayControlStore = useDisplayControlStore()

const changeTheme = () => {
  displayControlStore.changeTheme()
  document.documentElement.setAttribute('display-theme', displayControlStore.displayTheme)
}
</script>

<style scoped lang="scss">

.main-page-container {
  width: 100vw;
  .tool-bar {
    height: 70px;
    width: 100%;
    background-color: var(--base-color);
    transition: background-color 0.3s;
  }
}
</style>
